<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>使用v-model指令</title>
    </head>
    <body>

        <h3>在自定义组件上使用 v-model 指令</h3>
        <p>基于 vue.js 2.6.14 测试</p>

        <div id="root">
            <p>counter: {{ counter }}</p>
            <handler v-model="counter"></handler>
        </div>

         <!-- 导入 vue.js 2.x 核心库 -->
         <script src="../scripts/vue@2.6.14.js"></script>

         <script>

             const Handler = {
                 template: `<button @click="handler">+1</button>`,
                 data(){
                     return { value: 1 }
                 },
                 methods: {
                     handler(){
                         this.value++;
                         // 触发 input 事件
                         this.$emit( 'input' , this.value );
                     }
                 }
             }

             const options = {
                el: '#root',
                data:{
                    counter: 1
                },
                components: {
                    // 注册子组件
                    'handler' : Handler
                }
             }
             const root = new Vue(options);
             console.log( root );
         </script>
        
    </body>
</html>